<script type="text/javascript">

  const material_data = {
    long: 1,
    type: 'image',
    remark: '',
    video_title: '',
    video_desc: ''
  }

  const materialInit = function (layui) {

    let http = layui.http
    let form = layui.form
    let toast = layui.toast
    let table = layui.table
    let clipboard = layui.clipboard

    let options = table_common_options('{{ auth_route('wechat/materialList') }}', [
      { field: 'id', width: 80, title: 'ID' },
      { field: 'type', width: 100, title: '{{ __.type }}' },
      { field: 'media_id', width: 140, title: '{{ __.media_id }}' },
      { field: 'filename', title: '{{ __.filename }}' },
      {
        field: 'filepath', title: '{{ __.filepath }}', templet: function (d) {
          if (d.url) {
            return '<img style="max-width: 30px;max-height:30px;" src="' + d.filepath + '">'
          }
          return ''
        }
      },
      { field: 'remark', width: 100, title: '{{ __.remark }}' },
      { field: 'mime', width: 120, title: '{{ __.mime }}' },
      { field: 'ext', width: 100, title: '{{ __.ext }}' },
      { field: 'size_text', width: 100, title: '{{ __.size }}' },
      { field: 'expire_time', width: 180, title: '{{ __.expire_time }}' },
      { field: 'created_at', title: '{{ __.created_at }}' },
      {
        field: 'action', width: 200, title: '{{ __('btn.operation') }}', fixed: 'right', templet: function (d) {
          return `
                  <a class="layui-btn layui-btn-normal layui-btn-xs copy-media-id" data-clipboard-text="${d.media_id}">{{ __('btn.copy') }}</a>
                  <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="material-preview" >{{ __('btn.preview') }}</a>
                  <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="material-remove">{{ __('btn.delete') }}</a>
                  `
        }
      },
    ])

    table.render(options)

    table.on('toolbar(material-list)', function (obj) {
      if (obj.event === '__reload__') {
        table.reload('page-table-render', {}, true)
      }
    })

    table.on('tool(material-list)', function (obj) {
      let data = obj.data
      let event = obj.event
      if (event === 'material-preview') {
        window.open('{{ auth_route('wechat/materialPreview') }}?id=' + data.id)
      } else if (event === 'material-remove') {
        let index = toast.confirm(lang.confirm_delete || '请再次确认是否删除?', function () {
          http.post('{{ auth_route('wechat/materialRemove') }}', { id: data.id }, function (res) {
            toast.response(res)
            layer.close(index)
          })
        })
      }
    })

    form.on('submit(search)', function (data) {
      table.reloadData('page-table-render', {
        where: data.field,
      })
      return false
    })

    // 复制素材id
    let clip = new clipboard('.copy-media-id')
    clip.on('success', function (e) {
      layer.msg('{{ __('dialog.cp_success') }}', { icon: 1, anim: 'slideDown', offset: 't' })
    })
    clip.on('error', function (e) {
      layer.msg('{{ __('dialog.cp_fail') }}', { icon: 2 })
    })
  }

</script>